<template>
    <div class="">
        <!-- 微信绑定 -->
        <el-dialog v-dialogDrag title="微信绑定" :visible.sync="wechatDialogVisible" width="330px" :modal-append-to-body="true" :append-to-body="true" center @close="wxbd()">
            <p style="color: #fff2d5; font-size: 12px">为了给您提供更好的服务</p>
            <h4 style="color: #fff2d5; font-size: 14px; margin-bottom: 20px; font-weight: 400">请绑定微信</h4>
            <img style="width: 200px; margin-left: 30px" :src="wechatImg" alt="" />
            <el-button style="margin-top: 17px" type="primary" @click="closeDialog()" class="button_btn">确定</el-button>
        </el-dialog>
        <!-- 合并账号 -->
        <Combinedaccount ref="combinedaccount"></Combinedaccount>
    </div>
</template>

<script>
import Combinedaccount from '@/components/Combinedaccount.vue'
import { qrcodes, statuss, } from '@/api/url';
export default {
  props: {},
  created () { },
  data () {
    return {
      wechatDialogVisible: false, // 微信绑定弹窗
      wechatImg: '',
      startTime: 0, // 初始开始请求时间
      timer: null,
    }
  },
  mounted () { },
  methods: {
    closeDialog () {
      clearTimeout(this.timer);
      this.wechatDialogVisible = false
    },
    open_wechatDialogVisibles () { this.qrcodess().then(() => { this.wechatDialogVisible = true; }) },
    // 获取绑定微信二维码
    async qrcodess () {
      try {
        const res = await qrcodes();
        if (res.data.code === 200) {
          this.wechatImg = 'data:image/gif;base64,' + res.data.img;
          this.handlerData();
        } else {
          console.log();
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 微信绑定开始准备轮询
    handlerData () {
      this.startTime = new Date().getTime(); // 获取触发轮询时的时间
      this.inquireData(); // 调用轮询接口,开始进行轮询
    },
    inquireData () {
      const reload = () => {
        clearTimeout(this.timer); // 清除定时器
        // 超过30秒则停止轮询
        if (new Date().getTime() - this.startTime > 30000) {
          clearTimeout(this.timer);
          this.$message({ message: '扫码超时,请再试一次', type: 'error', center: true });
          this.wechatDialogVisible = false;
          return;
        }
        // 1s一次, 轮询中
        this.timer = setTimeout(() => {
          this.inquireData(); // 调用轮询
        }, 1000);
      };
      // 获取微信二维码扫码状态(轮询)
      statuss()
        .then(res => {
          // console.log(res)
          if (res.data.code === 200 && res.data.error === 0) {
            clearTimeout(this.timer); // 清除定时器
            this.$message({ message: '恭喜你，微信绑定成功！', type: 'success', center: true });
            this.wechatDialogVisible = false;
            this.$EventBus.$emit('callGetInfos', 1)//!调用个人中心的getInfo方法
            this.$EventBus.$emit('callTopGetInfos', 1)//!调用首页的gitInfo方法
            this.$EventBus.$emit('openProfileAuths', 1)//!查询是否绑定微信和实名认证
          } else if (res.data.code === 200 && res.data.error === 1) {
            clearTimeout(this.timer2) // 清除定时器
            if (res.data.type != undefined) {
              this.wechatDialogVisible = false
              this.$refs.combinedaccount.Combined = res.data
              this.$refs.combinedaccount.Combinedaccount = true
            } else {
              this.$message({ message: res.data.msg, type: 'error', center: true })
              this.wechatDialogVisible = false
            }
          } else {
            // 没成功,调用轮询
            reload();
          }
        })
        .catch(err => {
          // 请求错误,也继续轮询
          console.log(err);
          reload();
        });
    },
    beforeDestroy () {
      clearTimeout(this.timer);
    },
    wxbd () {
      clearTimeout(this.timer); // 清除定时器
    },
  },
  computed: {},
  watch: {},
  components: { Combinedaccount },
}
</script>

<style scoped lang='less'>
/deep/ .el-dialog__body {
    background: url('@/assets/dialogImg/Pop-up_bj.png');
    height: 384px !important;
}
</style>
